<template>
  <el-container>
    <el-aside :width="asideWidth" style="background-color: #545c64;">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <!-- 首页 -->
        <el-menu-item index="1" @click.native="redirect('/admin')">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </el-menu-item>
        <!-- 平台 -->
        <el-submenu index="2" v-if="roles.includes('ROLE_ADMIN')">
          <template slot="title">
            <i class="el-icon-s-check"></i>
            <span slot="title">平台</span>
          </template>
          <el-menu-item-group>
            <template slot="title">用户</template>
            <el-menu-item index="2-1" @click.native="redirect('/admin/userManage')">
              <i class="el-icon-s-custom"></i>
              用户管理
            </el-menu-item>
            <el-menu-item index="2-2" @click.native="redirect('/admin/newsManage')">
              <i class="el-icon-s-comment"></i>
              动态管理
            </el-menu-item>
            <el-submenu index="2-3">
              
              <template slot="title">
                <i class="el-icon-shopping-bag-1"></i>
                二手交易
              </template>
              <el-menu-item index="2-3-1" @click.native="redirect('/admin/secondHandManage')">
                <i class="el-icon-s-order"></i>商品管理
              </el-menu-item>
              <el-menu-item index="2-3-2" @click.native="redirect('/admin/secondHandOrderManage')">
                <i class="el-icon-s-order"></i>订单管理
              </el-menu-item>
            </el-submenu>
          </el-menu-item-group>
          <el-menu-item-group>
            <template slot="title">社区</template>
            <el-menu-item index="2-4" @click="redirect('/admin/addCommunity')">
              <i class="el-icon-office-building"></i>
              小区管理
            </el-menu-item>
            <el-menu-item index="2-5"  @click.native="redirect('/admin/activityManage')">
              <i class="el-icon-date"></i>
              活动管理
            </el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <template slot="title">商家</template>
            <el-menu-item index="2-6" @click.native="redirect('/admin/qualificationreview')">
              <i class="el-icon-s-claim"></i>
              资质审核
            </el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <template slot="title">通知</template>
            <el-menu-item index="2-7" @click.native="redirect('/admin/internalMessage')">
              <i class="el-icon-message"></i>
              站内信
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- 物业 -->
        <el-submenu index="3" v-if="roles.includes('ROLE_PROPERTY')">
          <template slot="title">
            <i class="el-icon-office-building"></i>
            <span slot="title">物业</span>
          </template>
          <el-menu-item index="3-1" @click="redirect('/admin/housingCheck')">
            <i class="el-icon-house"></i>
            房产审核
          </el-menu-item>
          <el-menu-item index="3-3" @click="redirect('/admin/adminComplaintAdvice')">
            <i class="el-icon-document-delete"></i>
            意见投诉
          </el-menu-item>
        </el-submenu>
        <!-- 商家 -->
        <el-submenu index="4" v-if="roles.includes('ROLE_MERCHANT')">
          <template slot="title">
            <i class="el-icon-s-shop"></i>
            <span slot="title">商家</span>
          </template>
          <!-- 改路由 -->
          <el-menu-item index="4-1"   v-if="roles.includes('ROLE_MERCHANT')&&merchant.status==1" @click.native="redirect('/admin/merchantservice')">
            <i class="el-icon-message-solid"></i>
            服务管理
          </el-menu-item>
          <el-menu-item index="4-2" v-if="roles.includes('ROLE_MERCHANT')&&merchant.status==1"  @click.native="redirect('/admin/merchantorder')">
            <i class="el-icon-s-order"></i>
            订单管理
          </el-menu-item>
          <el-menu-item index="4-3"  v-if="roles.includes('ROLE_MERCHANT')" @click.native="redirect('/admin/personalmerchant')">
            <i class="el-icon-info"></i>
            我的资质
          </el-menu-item>
        </el-submenu>
        <!-- 设置 -->
        <el-submenu index="5" v-if="roles.includes('ROLE_ADMIN')">
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <span slot="title">设置</span>
          </template>
          <el-menu-item index="5-1" @click="redirect('/admin/roleManage')">
            <i class="el-icon-s-custom"></i>
            角色管理
          </el-menu-item>
          <el-menu-item index="5-2" @click="redirect('/admin/log')">
            <i class="el-icon-document"></i>
            日志信息
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
      <el-container>
        <el-header height="50px" style="padding-top:6px;border-bottom: 1px solid rgb(230,230,230);float:left;">
          <el-button @click="setCollapse()" plain style="width:38px;font-size:20px;padding:7px;float:left;">
            <i v-if="isCollapse" class="el-icon-s-unfold"></i>
            <i v-else class="el-icon-s-fold"></i>
          </el-button>
          <el-breadcrumb separator-class="el-icon-arrow-right"  style="margin:11px;float:left;">
            <el-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbs" :key="index" :to="{ path: breadcrumb.path }">{{breadcrumb.value}}</el-breadcrumb-item>
          </el-breadcrumb>
          <el-dropdown style="float:right;">
            <span class="el-dropdown-link">
              <el-avatar :size="36" :src="user.headImg" slot="reference"></el-avatar><i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="redirect('/admin')">首页</el-dropdown-item>
              <el-dropdown-item @click.native="redirect('/logout')">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <!-- 路由页面 -->
        <router-view/>

        <!-- 路由页面 -->
        <!-- <el-main style="border-left:1px solid rgb(230,230,230);">
          
          <router-view @chgBreadcrumb="chgBreadcrumb"/>
        </el-main> -->

      </el-container>  
  </el-container>
</template>

<script>
  export default {
    data(){
      return {
        /* 侧边栏 */
        asideWidth: "220px",
        activeIndex: "1",
        isCollapse: false,
        /* 登录用户的信息 */
        user: {},
        roles: [],
        /* 面包屑 */
        breadcrumbs: [{path: "/admin", value: "首页"}],
        //商家状态信息
        merchant:{
        },
        judge:false
      }
    },
    methods: {
      /* 展开/缩小菜单 */
      setCollapse: function(){
        if(this.isCollapse){
          this.asideWidth = "220px"
          this.isCollapse = false
        }else{
          this.asideWidth = "65px"
          this.isCollapse = true
        }
      },
      /* 本跳转页面的统一方法 */
      redirect: function(view){
        this.$router.push(view)
      }
    },
    watch: {
	    // 监听路由地址的改变，让刷新页面后，也能选择正确的菜单项
      // 此页面需要指定面包屑
	    $route:{
        immediate: true,
        handler(newVal){
          this.breadcrumbs = [{path: "/admin", value: "首页"}]
          if(newVal.path == "/admin"){
            this.activeIndex = "1"
          }else if(newVal.path == "/admin/userManage"){
            this.activeIndex = "2-1"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "平台"}, {path: "/admin/userManage", value: "用户管理"}])
          }else if(newVal.path == "/admin/activityManage") {
            this.activeIndex = "2-5"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "平台"}, {path: "/admin/activityManage", value: "活动管理"}])
          }else if(newVal.path == "/admin/secondHandOrderManage"){
            this.activeIndex = "2-3-2"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "平台"},{value: "二手交易"},{path: "/admin/secondHandOrderManage", value: "订单管理"}])
          }else if(newVal.path == "/admin/secondHandManage"){
            this.activeIndex = "2-3-1"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "平台"},{value: "二手交易"}, {path: "/admin/secondHandManage", value: "商品管理"}])
          }else if(newVal.path == "/admin/newsManage"){
            this.activeIndex = "2-2"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "平台"}, {path: "/admin/newsManage", value: "动态管理"}])
          }else if(newVal.path == "/admin/roleManage"){
            this.activeIndex = "5-1"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "平台"}, {path: "/admin/roleManage", value: "角色管理"}])
          }else if(newVal.path == "/admin/log"){
            this.activeIndex = "5-2"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "平台"}, {path: "/admin/log", value: "日志"}])
          }else if(newVal.path == "/admin/housingCheck"){
            this.activeIndex = "3-1"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "物业"}, {path: "/admin/housingCheck", value: "房产审核"}])
          }else if(newVal.path == "/admin/adminComplaintAdvice"){
            this.activeIndex = "3-3"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "物业"}, {path: "/admin/adminComplaintAdvice", value: "意见投诉"}])
          }else if(newVal.path == "/admin/addCommunity"){
            this.activeIndex = "2-4"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "平台"}, {path: "/admin/addCommunity", value: "小区管理"}])
          }else if(newVal.path == "/admin/activityManage") {
            this.activeIndex = "2-6"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "平台"}, {path: "/admin/activityManage", value: "活动管理"}])
          }else if(newVal.path == "/admin/newsManage"){
            this.activeIndex = "2-2"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "平台"}, {path: "/admin/newsManage", value: "动态管理"}])
            // 商家部分
          }else if(newVal.path == "/admin/merchantservice"){
            this.activeIndex = "4-1"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "商家服务"}, {path: "/admin/merchantservice", value: "服务管理"}])
          }else if(newVal.path == "/admin/merchantorder"){
            this.activeIndex = "4-2"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "商家服务"}, {path: "/admin/merchantorder", value: "订单管理"}])
          }else if(newVal.path == "/admin/personalmerchant"){
            this.activeIndex = "4-3"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "商家服务"}, {path: "/admin/personalmerchant", value: "我的资质"}])
          }else if(newVal.path == "/admin/unacceptorder"){
            // this.activeIndex = "4-2"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "商家服务"}, {path: "/admin/unacceptorder", value: "订单管理"}])
          }
          else if(newVal.path == "/admin/addservice"){
            // this.activeIndex = "4-2"
            this.breadcrumbs = this.breadcrumbs.concat([{value: "商家服务"}, {path: "/admin/addservice", value: "添加服务"}])
          }
        }
	    }
	  },
    mounted(){
      /* 设置页面标题 */
      document.title="后台管理 - 汤臣一品便民服务中心"

      // 从本地取出user对象
      this.user = JSON.parse(sessionStorage.getItem("user"))
      // 循环出该登录用户所有的角色信息
      let roles = []
      for(const role of this.user.roles){
        roles.push(role.name)
      }
      this.roles = roles
      //获取商家状态码
      // alert("用户id："+JSON.parse(window.sessionStorage.getItem("user")).id)
      this.$axios.get("http://localhost:8080/merchant/findmerchant/"+ JSON.parse(window.sessionStorage.getItem("user")).id).then(res =>{
         console.log("商家信息")
         console.log(res.data)//ResponseResult
        console.log(res.data.data)
        // if(res.data.data!=null){
        //   this.judge=true
        // }  
        // alert(this.judge)
        this.merchant=res.data.data
       
        
      })
      //  alert("状态码："+ (this.merchant.status))
    }
  }
</script>

<style scoped>
  .el-aside {
    height: 100vh;
    background-color: #ffffff;
    overflow-y: auto;
    -ms-overflow-style: none; /* Edge */
    scrollbar-width: none; /* Firefox */
  }
</style>